<template>
  <!-- 一条文章单元格 -->
  <van-cell @click="$router.push('/article?art_id='+arr.art_id)">
    <!-- 标题区域的插槽 -->
    <template #title>
      <div class="title-box">
        <!-- 标题 -->
        <span>{{ arr.title }}</span>
        <!-- 单图 -->
        <img
          class="thumb"
          v-if="arr.cover.type === 1"
          :src="arr.cover.images[0]"
        />
      </div>
      <!-- 三张图片 -->
      <div class="thumb-box" v-if="arr.cover.type > 1">
        <img
          class="thumb"
          v-for="(itm, i) in arr.cover.images"
          :key="i"
          :src="itm"
        />
      </div>
    </template>
    <!-- label 区域的插槽 -->
    <template #label>
      <div class="label-box">
        <div>
          <span>作者:{{ arr.aut_name }}</span>
          <span>{{ arr.art_id }}评论</span>
          <span>{{ arr.pubdate | Datefly }}</span>
        </div>
        <!-- 反馈按钮 -->
        <van-icon name="cross" @click.stop="onCloseClick" v-if="isShow" />
        <van-action-sheet
          v-model="show"
          :actions="actions"
          @select="onSelect"
          get-container="body"
          cancel-text="取消"
        />
        <van-action-sheet
          @cancel="show=true"
          v-model="show1"
          :actions="actions1"
          @select="onSelect1"
          get-container="body"
          cancel-text="返回"
        />
        <van-dialog
          v-model="show3"
          title="反馈内容"
          show-cancel-button
          get-container="body"
          @confirm="onconfirm"
          :beforeClose='beforeClose'
        >
          <van-field v-focus v-model.trim="value" placeholder="请输入反馈" />
        </van-dialog>
      </div>
    </template>
  </van-cell>
</template>

<script>
import { Toast } from 'vant'
import { postDislikes, PostReports } from '@/api/home.js'
export default {
  data () {
    return {
      show: false,
      show1: false,
      show3: false,
      value: '',
      actions: [
        { id: 11, name: '不感兴趣' },
        { id: 22, name: '反馈垃圾内容' },
        { id: 33, name: '拉黑作者' }
      ],
      actions1: [
        {
          id: 0,
          name: '其它问题'
        },
        {
          id: 1,
          name: '标题夸张'
        },
        {
          id: 2,
          name: '低俗色情'
        },
        {
          id: 3,
          name: '错别字多'
        },
        {
          id: 4,
          name: '旧闻重复'
        },
        {
          id: 6,
          name: '内容不实'
        },
        {
          id: 8,
          name: '侵权'
        },
        {
          id: 5,
          name: '广告软文'
        },
        {
          id: 7,
          name: '涉嫌违法犯罪'
        }
      ],
      obj: {}
    }
  },
  methods: {
    onCloseClick () {
      this.show = true
    },
    async onSelect1 (e) {
      this.obj = {
        target: e.id + '',
        type: e.name
      }
      this.show1 = false
      if (e.id === 0) {
        this.show3 = true
        return
      }
      try {
        await PostReports(this.obj)
        Toast('反馈成功')
      } catch (error) {
        Toast('反馈失败')
      }
    },
    async onSelect (e) {
      this.show = false
      if (e.id === 22) {
        this.show1 = true
      } else if (e.id === 11) {
        this.$emit('Sele')
        await postDislikes(e.id + '')
      }
    },

    beforeClose (a, b) {
      if (this.value === '') {
        Toast('请输入内容')
        b(false)
      }
      this.value = ''
      b()
    },
    async onconfirm () {
      if (this.value === '') {
        return
      }
      this.obj.remark = this.value
      try {
        await PostReports(this.obj)
        Toast('反馈成功')
      } catch (error) {
        Toast('反馈失败')
      }
    }

  },
  props: {
    arr: {
      type: Object,
      required: true
    },
    isShow: {
      type: Boolean,
      default: true
    }
  }
}
</script>

<style scoped lang="less">
/* 标题样式 */
.title-box {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

/* label描述样式 */
.label-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 文章信息span */
.label-box span {
  margin: 0 3px;
  &:first-child {
    margin-left: 0;
  }
}
/* 图片的样式, 矩形黄金比例：0.618 */
.thumb {
  width: 113px;
  height: 70px;
  background-color: #f8f8f8;
  object-fit: cover;
}

/* 三图, 图片容器 */
.thumb-box {
  display: flex;
  justify-content: space-between;
}
</style>
